<template>
  <div class="cart-item">
    <!-- 复选框 -->
    <van-checkbox :value="check" @click="toggleCheck({ id })"></van-checkbox>
    <!-- 商品信息框 -->
    <van-card
      :num="count"
      :price="price | toFix2"
      :desc="title.slice(0,5)"
      :title="title.slice(0,15)"
      :thumb="photo[0].url"
      @click-thumb="$router.push(`/detail?id=${id}`)"
    >
    <template #tags>
      <van-tag plain type="danger">{{couponValue}}</van-tag>
    </template>
      <!-- 加减按钮 -->
    <template #footer>
      <van-stepper  :value="count" @change="countChange"/>
    </template>
    </van-card>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  props: {
    id: {
      type: Number,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    photo: {
      type: Array,
      required: true
    },
    check: {
      type: Boolean,
      required: true
    },
    count: {
      type: Number,
      required: true
    },
    price: {
      type: Number,
      required: true
    },
    couponValue: {
      type: String,
      required: false
    }
  },
  methods: {
    ...mapMutations(['toggleCheck']),
    // 用提交一个mutate的方式
    countChange (num) {
      this.$store.commit('changeCountById', { id: this.id, num })
    }
  }
}
</script>

<style >
.cart-item{
    width:93%;
    height: 132px;
    margin: 10px auto;
    display: flex;
    flex: 1;
    background-color: #fafafa;
  }
.van-checkbox{
  padding-left: 10px;
}
.van-card{
  flex: 1;
  position: static;
  }
</style>
